<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

    <title>jQuery WeUI</title>

    <link rel="stylesheet" href="jquery-weui/lib/weui.min.css">
    <link rel="stylesheet" href="jquery-weui/css/jquery-weui.css">

    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

    <script src="jquery-weui/lib/jquery-2.1.4.js"></script>
    <script src="jquery-weui/js/jquery-weui.js"></script>

    <script src="jquery-weui/js/swiper.js"></script>

    <style>
        .weui_cell:before {
            content: " ";
            position: absolute;
            left: 0;
            right: 0;
            width:auto;
            height: 1px;
            border-top: 1px solid #D9D9D9;
            color: #D9D9D9;
        }
    </style>
</head>
<body>

<!--响应式布局图片-->
<style>
    .center-block {
        display: block;
        margin-right: auto;
        margin-left: auto;
    }

    .img-responsive {
        display: block;
        max-width: 100%;
        height: auto;
    }
</style>
<!-- <img src="img/banner1.png" class="img-responsive center-block" alt="Responsive image"> -->


<!--轮播器-->
<style>
    .swiper-container .dots {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        text-align: center;
        z-index: 10;
    }

    .swiper-container .dots .dot {
        display: inline-block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        margin: 3px;
        background-color: #888;
        background-repeat: no-repeat;
        background-size: 18px 6px;
        background-position: 0 0;
    }

    .swiper-container .dots .dot.active {
        background-color: #fff;
        background-position: -9px 0;
    }

</style>
<link rel="stylesheet" href="swiper/css/swiper.min.css"/>
<script src="swiper/js/swiper.min.js"></script>
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <a href="http://pfinal.cn">
                <img class="img-responsive center-block" src="img/banner1.png" alt=""/>
            </a>
        </div>
        <div class="swiper-slide">
            <a href="http://myzheng.cn">
                <img class="img-responsive center-block" src="img/banner1.png" alt=""/>
            </a>
        </div>
        <div class="swiper-slide">
            <a href="http://baidu.com">
                <img class="img-responsive center-block" src="img/banner1.png" alt=""/>
            </a>
        </div>
    </div>
    <div class="dots"></div>
</div>

<script type="text/javascript">
    new Swiper('.swiper-container', {
        loop: true,
        autoplay: 3000,
        pagination: '.dots',
        bulletClass: "dot",
        bulletActiveClass: "active"
    });
</script>

<!--
<div style="border-top: 1px solid #d9d9d9;"></div>
-->

<style>
    .movie-name {
        font-weight: bold;
    }

    .movie-summary {
        color: #747474;
    }

    .movie-description {
        color: #D8D8D8;
    }

    .movie-point {
        color: #E48A8B;
    }
</style>
<div class="weui_cell">
    <div class="weui_cell_hd"><img style="width: 80px;height:110px;"
                                   src="">
    </div>
    <div class="weui_cell_bd weui_cell_primary">
        <p class="movie-name">电影名称1</p>
        <p class="movie-summary">一句话简介一句话简介</p>
        <p class="movie-description">演员列表/演员列表/演员列表/演员列表</p>

    </div>
    <div class="weui_cell_ft">
        <div class="movie-point">8.3分</div>
        <br>
        <div><a href="#" class="weui_btn weui_btn_mini weui_btn_primary">购票</a></div>
    </div>
</div>

<div class="weui_cell">
    <div class="weui_cell_hd"><img style="width: 80px;height:110px;"
                                   src="">
    </div>
    <div class="weui_cell_bd weui_cell_primary">
        <p class="movie-name">电影名称1</p>
        <p class="movie-summary">一句话简介一句话简介</p>
        <p class="movie-description">演员列表/演员列表/演员列表/演员列表</p>

    </div>
    <div class="weui_cell_ft">
        <div class="movie-point">8.3分</div>
        <br>
        <div><a href="#" class="weui_btn weui_btn_mini weui_btn_primary">购票</a></div>
    </div>
</div>

<div class="weui_cell">
    <div class="weui_cell_hd"><img style="width: 80px;height:110px;"
                                   src="">
    </div>
    <div class="weui_cell_bd weui_cell_primary">
        <p class="movie-name">电影名称1</p>
        <p class="movie-summary">一句话简介一句话简介</p>
        <p class="movie-description">演员列表/演员列表/演员列表/演员列表</p>

    </div>
    <div class="weui_cell_ft">
        <div class="movie-point">8.3分</div>
        <br>
        <div><a href="#" class="weui_btn weui_btn_mini weui_btn_primary">购票</a></div>

    </div>
</div>


<style>

    .navtab {
        display: -webkit-flex;
        display: flex;
    }

    .navtab .item {
        -webkit-flex: 1;
        flex: 1;
        line-height: 45px;
        text-align: center;
        color: #333;
    }

    .navtab .item.active {
        color: #36CA71;
        border-bottom: 2px solid #36CA71;
    }
</style>

<div class="navtab">

    <a class="item ">
        今天 08-01
    </a>
    <a class="item active">
        明天 08-02
    </a>
    <a class="item">
        后天 08-03
    </a>
    <a class="item">
        本周四 08-04
    </a>
</div>



<div class="weui_tabbar">
    <a href="javascript:;" class="weui_tabbar_item weui_bar_item_on">
        <div class="weui_tabbar_icon">
            <span class="glyphicon glyphicon-cloud" style="font-size: 22px;color:green"></span>
        </div>
        <p class="weui_tabbar_label">微信</p>
    </a>
    <a href="javascript:;" class="weui_tabbar_item">
        <div class="weui_tabbar_icon">
            <span class="glyphicon glyphicon-calendar" style="font-size: 22px;color:red;"></span>
        </div>
        <p class="weui_tabbar_label">通讯录</p>
    </a>
    <a href="javascript:;" class="weui_tabbar_item">
        <div class="weui_tabbar_icon">
            <span class="glyphicon glyphicon-send" style="font-size: 22px;"></span>
        </div>
        <p class="weui_tabbar_label">发现</p>
    </a>
    <a href="javascript:;" class="weui_tabbar_item">
        <div class="weui_tabbar_icon">
            <span class="glyphicon glyphicon-user" style="font-size: 22px;"></span>
        </div>
        <p class="weui_tabbar_label">我</p>
    </a>
</div>


</body>
</html>